<template>
  <div class="card_hContainer">
    <div class="card_hLeft">
      <span class="card_hTitle">{{ title }}</span>
      <Right class="card_hIcon"></Right>
    </div>
    <div
      class="card_hRight"
      :style="{ backgroundImage: `url(${imageUrl})` }"
    ></div>
  </div>
</template>

<script setup lang="ts">
import defaultImage from "@/assets/png/xgc.png";
import { Right } from "@element-plus/icons-vue";

defineProps({
  imageUrl: {
    type: String,
    required: false,
    default: defaultImage,
  },
  title: {
    type: String,
    required: false,
    default: "Test",
  },
});
</script>

<style scoped lang="scss">
.card_hContainer {
  @include relative_hw(219px, 729px);
  flex-direction: row;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #dddddd;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.09);
  transition: all 0.5s ease;
  cursor: pointer;
  align-items: center;

  &:hover {
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.09);
  }

  &:active {
    transform: scale(0.91);
  }

  .card_hLeft {
    @include relative_hw(100%, 72px);
    flex-direction: column;
    margin-left: 98px;

    .card_hTitle {
      margin-top: 55px;
      font-family: "Songti SC", "Songti SC";
      font-weight: 900;
      font-size: 24px;
      color: #035db9;
      text-align: left;
      white-space: nowrap; // 禁止换行
    }

    .card_hIcon {
      margin-top: 54px;

      width: 29.36px;
      height: 16.36px;
      color: #035db9;
    }
  }

  .card_hRight {
    @include relative_hw(205px, 257px);
    // background-image: url("@/assets/png/xgc.png");
    // background-image: url("@/assets/png/demand.png");
    background-size: cover;
    background-position: center;
    margin-left: 255px;
  }
}
</style>
